
<template>
  <view class="package-detail-page">
    <!-- 套餐基本信息 -->
    <view class="package-header">
      <image :src="packageDetail.image" class="package-image" mode="widthFix"></image>
      <view class="package-basic-info">
        <text class="package-title">{{ packageDetail.name }}</text>
        <!-- 修改简介文字的左右间距 -->
        <text class="package-intro">{{ packageDetail.introduction }}</text>
        <view class="price-section">
          <text class="current-price">¥{{ packageDetail.price }}</text>
          <text class="original-price" v-if="packageDetail.originalPrice">¥{{ packageDetail.originalPrice }}</text>
        </view>
      </view>
    </view>

    <!-- 套餐详细介绍 -->
    <view class="package-description" v-if="packageDetail.content">
      <view class="section-title">套餐介绍</view>
      <rich-text class="content" :nodes="packageDetail.content"></rich-text>
    </view>

    <!-- 套餐包含项目 - Tab切换 -->
    <view class="package-items">
      <view class="section-title">套餐包含</view>
      <view class="tabs">
        <view
            class="tab"
            :class="{ active: activeIncludeTab === 'quota' }"
            @tap="switchIncludeTab('quota')"
        >
          定额
        </view>
        <view
            class="tab"
            :class="{ active: activeIncludeTab === 'material' }"
            @tap="switchIncludeTab('material')"
        >
          材料
        </view>
      </view>

      <!-- 定额项目 -->
      <view class="tab-content" v-if="activeIncludeTab === 'quota'">
        <view class="items-list">
          <view v-for="(item, index) in packageDetail.includedQuota" :key="index" class="item">
            <text class="item-icon">✓</text>
            <text class="item-name">{{ item.name }}</text>
            <text class="item-desc" v-if="item.description">{{ item.description }}</text>
          </view>
        </view>
      </view>

      <!-- 材料项目 -->
      <view class="tab-content" v-if="activeIncludeTab === 'material'">
        <view class="items-list">
          <view v-for="(item, index) in packageDetail.includedMaterial" :key="index" class="item">
            <text class="item-icon">✓</text>
            <text class="item-name">{{ item.name }}</text>
            <text class="item-desc" v-if="item.description">{{ item.description }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 增项服务 - Tab切换 -->
    <view class="additional-services">
      <view class="section-title">增项服务</view>
      <view class="tabs">
        <view
            class="tab"
            :class="{ active: activeAdditionalTab === 'quota' }"
            @tap="switchAdditionalTab('quota')"
        >
          定额
        </view>
        <view
            class="tab"
            :class="{ active: activeAdditionalTab === 'material' }"
            @tap="switchAdditionalTab('material')"
        >
          材料
        </view>
      </view>

      <!-- 增项定额项目 -->
      <view class="tab-content" v-if="activeAdditionalTab === 'quota'">
        <view class="services-list">
          <view v-for="(service, index) in packageDetail.additionalQuota" :key="index" class="service">
            <view class="service-header">
              <text class="service-name">{{ service.name }}</text>
              <text class="service-price">+¥{{ service.price }}</text>
            </view>
            <text class="service-desc" v-if="service.description">{{ service.description }}</text>
          </view>
        </view>
      </view>

      <!-- 增项材料项目 -->
      <view class="tab-content" v-if="activeAdditionalTab === 'material'">
        <view class="services-list">
          <view v-for="(service, index) in packageDetail.additionalMaterial" :key="index" class="service">
            <view class="service-header">
              <text class="service-name">{{ service.name }}</text>
              <text class="service-price">+¥{{ service.price }}</text>
            </view>
            <text class="service-desc" v-if="service.description">{{ service.description }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部固定按钮 -->
    <view class="footer-bar">
      <button class="buy-button" @tap="buyPackage">现在报价</button>
    </view>
  </view>
</template>

<style scoped lang="scss">.package-detail-page {
  background-color: #f8f9fa;
  padding-bottom: 120rpx;
}

.package-header {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.package-image {
  width: 100%;
  height: 400rpx;
}

.package-basic-info {
  padding: 30rpx;
}

.package-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

/* 修改简介文字的左右间距 */
.package-intro {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  display: block;
  margin-bottom: 20rpx;
  padding: 0 10rpx; /* 添加左右内边距，避免顶着左边展示 */
}

.price-section {
  display: flex;
  align-items: center;
}

.current-price {
  font-size: 40rpx;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 20rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 8rpx;
    height: 100%;
    background-color: #e93b3d;
  }
}

.tabs {
  display: flex;
  background-color: #f8f9fa;
  border-bottom: 1rpx solid #eee;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  border-bottom: 4rpx solid transparent;

  &.active {
    color: #e93b3d;
    border-bottom-color: #e93b3d;
    font-weight: bold;
  }
}

.tab-content {
  padding: 0 30rpx 30rpx;
}

.package-description {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx 30rpx;
}

.content {
  padding: 30rpx 20rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  word-wrap: break-word;
  text-align: left;
}

.package-items{
  padding: 30rpx 30rpx;
}

.additional-services {
  padding: 30rpx 30rpx;
}

.package-items, .additional-services {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.items-list {
  padding-top: 20rpx;
}

.item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
  border-bottom: 1rpx dashed #eee;

  &:last-child {
    border-bottom: none;
  }
}

.item-icon {
  color: #07c160;
  font-size: 32rpx;
  margin-right: 16rpx;
  line-height: 40rpx;
}

.item-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  line-height: 40rpx;
}

.item-desc {
  flex: 1;
  font-size: 24rpx;
  color: #999;
  line-height: 40rpx;
  margin-left: 48rpx;
  margin-top: 8rpx;
  display: block;
}

.services-list {
  padding-top: 20rpx;
}

.service {
  padding: 20rpx 0;
  border-bottom: 1rpx dashed #eee;

  &:last-child {
    border-bottom: none;
  }
}

.service-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.service-name {
  font-size: 28rpx;
  color: #333;
}

.service-price {
  font-size: 28rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.service-desc {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-left: 0;
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
}

.buy-button {
  width: 100%;
  height: 80rpx;
  background-color: #e93b3d;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
}
</style>

<script>export default {
  name: "package_detail",
  data() {
    return {
      packageId: '',
      activeIncludeTab: 'quota',       // 套餐包含项目的当前tab
      activeAdditionalTab: 'quota',   // 增项服务的当前tab
      packageDetail: {
        id: '1',
        image: '/static/banner/banner1.jpeg',
        name: '基础装修套餐',
        introduction: '适合小户型的基础装修服务组合，经济实用',
        price: '29900.00',
        originalPrice: '39900.00',
        content: '<p>本套餐为您提供房屋基础装修服务，包括水电改造、墙面处理、地面找平等核心项目。采用优质环保材料，专业施工团队操作，确保您的家居环境安全舒适。</p><p>服务流程：</p><p>1. 现场测量与设计<br>2. 水电改造<br>3. 瓦工施工<br>4. 木工制作<br>5. 油漆施工<br>6. 竣工验收</p>',
        // 套餐包含的定额项目
        includedQuota: [
          { name: '设计费', description: '包含基础设计服务' },
          { name: '施工管理费', description: '全程施工管理服务' },
          { name: '垃圾清运费', description: '装修垃圾清理运输' }
        ],
        // 套餐包含的材料项目
        includedMaterial: [
          { name: '水泥沙子', description: '品牌水泥沙子材料' },
          { name: '电线管路', description: '国标电线及管路' },
          { name: '防水材料', description: '卫生间厨房防水' }
        ],
        // 增项定额服务
        additionalQuota: [
          { name: '深化设计', price: '2000.00', description: '包含详细施工图纸' },
          { name: '监理服务', price: '1500.00', description: '第三方监理服务' }
        ],
        // 增项材料服务
        additionalMaterial: [
          { name: '瓷砖', price: '8000.00', description: '品牌瓷砖80平米' },
          { name: '地板', price: '12000.00', description: '实木复合地板50平米' },
          { name: '洁具', price: '5000.00', description: '品牌洁具套装' }
        ]
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.packageId = options.id;
      // 这里应该调用API获取真实的套餐详情
      // this.fetchPackageDetail(options.id);
    }
  },
  methods: {
    switchIncludeTab(tab) {
      this.activeIncludeTab = tab;
    },
    switchAdditionalTab(tab) {
      this.activeAdditionalTab = tab;
    },
    buyPackage() {
      uni.navigateTo({
        url: `/pages/cal/cal-wx`
      });
    },
    fetchPackageDetail(id) {
      // 调用后端API获取套餐详情
      // 这里只是示例，实际应替换为真实请求
      console.log('获取套餐详情，ID:', id);
    }
  }
}
</script>